@charset "utf-8";
// 引入reset样式

@import "reset";

// REM
@function r($px){
    @return ($px/40)*1rem;
}
// 减半
@function half($px){
    @return ($px/2)*1px;
}

html,body{
    height: 100%;
    position: relative;
}
// 头部
header{
    position: absolute;
    top: 0;
    width: r(750);
    height: half(150);
    padding: half(17) half(23) half(10);
    box-sizing: border-box;
    .logo{
        width: half(123);
        height: half(123);
        overflow: hidden;
        a{
            display: block;
            width: 100%;
            height: 100%;
        }
        img{
            width: 100%;
        }
    }
    .searchBar{
        margin: half(36) auto 0;
        width: r(266);
        height: half(51);
        border: 1px solid #ff9344;
        border-radius: half(51);
        overflow: hidden;
        
        input[type="search"]{
            width: calc(100% - 35px);
            height: 100%;
            vertical-align: top;
            border: none;
            padding-left: 12px;
            font-size: 12px;
        }
        input[type="image"]{
            margin-top: 4px;
            width: 18px;
            height: half(36);
            vertical-align: top;
        }
    }
    
    .selectBar{
        margin-top: half(31);
        width: half(159);
        height: half(56);
        border: solid 1px #ff9344;
        background-image: url(../img/dsjx_09.jpg);
        background-repeat: no-repeat;
        background-position: right 4px center;
        background-size: 15px 8px;
        select{
            -webkit-appearance: none;
            appearance: none;
            border: none;
            height: 100%;
            width: 100%;
            display: block;
            background: transparent;
        }
    }
}

// 主体
section{
    position: absolute;
    width: r(750);
    top: half(150);
    bottom: half(135);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .section1{
        width: 100%;
        img{
            width: 100%;
        }
    }
    .section2{
        height: r(88);
        width: 100%;
        padding-left: r(21);
        padding-right: r(21);
        box-sizing: border-box;
        .left{
            line-height: r(88);
            font-size: r(29);
            img{
                width: r(56);
                vertical-align: middle;
            }
        }
        .right{
            line-height: r(88);
            font-size: r(24);
            a{
                color: black;
            }
            img{
                width: r(25);
                min-width: 12px;
                vertical-align: middle;
            }
        }
    }
    .section3{
        width: 100%;
        margin: 0 auto;
        padding-left: r(83);
        padding-right: r(83);
        padding-top: r(12);
        box-sizing: border-box;
        font-size: 0;
        .mt29{
            margin-bottom: r(29);
        }
        div{
            width: r(241);
            img{
                width: r(240);
            }
        }
    }
    .section4{
        height: r(88);
        width: 100%;
        padding-left: r(21);
        padding-right: r(21);
        box-sizing: border-box;
        .left{
            line-height: r(88);
            font-size: r(29);
            img{
                width: r(56);
                vertical-align: middle;
            }
        }
        .right{
            line-height: r(88);
            font-size: r(24);
            a{
                color: black;
            }
            img{
                width: r(25);
                min-width: 12px;
                vertical-align: middle;
            }
        }
    }
    .section5{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(21);
        padding-top: r(24);
        padding-right: r(14);
        font-size: 0;
        >div{
            margin-bottom: r(30);
        }
        img{
            width: r(210);
        }
        .mf21{
            margin-left: r(21);
            width: r(475);
            line-height: r(55);
        }
        .wz30{
            font-size: r(30);
            color: black;
        }
        .wz22{
            font-size: r(22);
            color: #494949;
        }
        .wz32{
            font-size: r(32);
            color: #ff9a50;
        }
    }
}

// 底部
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: r(750);
    height: half(135);
    li{
        width: 25%;
        text-align: center;
        .iconfont{
            font-size: 36px;
            color: white;
            -webkit-text-stroke: 1px #FF9344;
        }
        p{
            font-size: 13px;
            color: black;
        }
        .icon-home{
            color: #FF9344;
        }
    }
}

